<template>
    <div>
        <router-link tag="div" to="/" class="header-aps" v-show="showAbs">
            <div class="iconfont header-aps-back"> &#xe624; </div>
        </router-link>
        <div class="header-fixed" v-show="!showAbs" :style='opactiyStyle'>
            景点详情
            <router-link to='/'>
                <div class="iconfont header-fixed-back">&#xe624;</div>
            </router-link>
        </div>
    </div>
</template>
<script>
    export default {
        name: 'DeatilHeader',
        data() {
            return {
                showAbs: true,
                opactiyStyle: {
                    opacity: 0
                }
            }
        },
        methods: {
            handleScroll() {
                // 滑动时距离窗口顶部的距离
                const top = document.documentElement.scrollTop;
                if (top > 60 && top < 140) {
                    const opacity = top / 140;
                    this.opactiyStyle = {
                        opacity
                    }
                    this.showAbs = false;
                } else if (top < 60) {
                    this.showAbs = true;
                }
            }
        },
        // 通过activated生命周期函数对window进行事件绑定
        activated() {
            window.addEventListener('scroll', this.handleScroll)
        },
        // 当页面被隐藏后，通过deactivated生命周期函数对绑定的全局事件进行解绑
        deactivated() {
            window.removeEventListener('scroll', this.handleScroll);
        }
    }
</script>
<style lang="less" scoped>
    @import '~styles/varibles.less';
    .header-aps {
        position: absolute;
        left: 0.2rem;
        top: 0.2rem;
        width: 0.8rem;
        height: 0.8rem;
        border-radius: 0.4rem;
        line-height: 0.8rem;
        text-align: center;
        background: rgb(0, 0, 0, 0.8);
        .header-aps-back {
            color: #fff;
            font-size: 0.4rem;
        }
    }
    .header-fixed {
        z-index: 2;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        height: @headerheight;
        line-height: @headerheight;
        overflow: hidden;
        text-align: center;
        color: #fff;
        background: @bgcolor;
        font-size: 0.32rem;
        .header-fixed-back {
            position: absolute;
            top: 0;
            left: 0;
            width: 0.64rem;
            text-align: center;
            font-size: 0.4rem;
            color: #fff;
        }
    }
</style>

